{% extends 'machine/base.html' %}
{% load static %}
{% block body_block %}
<div style="position: relative;top: 50px">
    <h1>提交问题</h1>
    <form id="submit_form" method = "post" action = "/submit/{{pid}}" class="ui fluid form" 
        enctype = "multipart/form-data">
        {% csrf_token %}
	<div id="submit_1">
		<select id="id_lang" name="lang" class="ui dropdown">
                	<option value="C">C</option>
                	<option value="CPP">C++</option>
                	<option value="JAVA">Java</option>
			<option value="PYTH">Python2</option>
                	<option value="PYTH3">Python3</option>
        	</select>
		<a style:"width:5px">&nbsp;</a>
	</div>
	<textarea id="id_code" name="code"></textarea>
	<pre id="editor"></pre>
	<div style="position:relative;float:right;">
	    <input type = "submit" name = "submit" value = "提交答案"  class="ui button positive">
	</div>
	<br><br><br><br><br><br>
    </form>
</div>
    <script type="text/javascript">
        $('#id_lang')
        .dropdown();
    </script>
    <script src="{% static "acee/ace-builds/src/ace.js" %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static "acee/ace-builds/src/ext-language_tools.js" %}" type="text/javascript" charset="utf-8"></script>
    <script>
                var editor = ace.edit("editor");
                var theme = "clouds"
                var language = "c_cpp";
                editor.setTheme("ace/theme/"+theme);
                editor.session.setMode("ace/mode/"+language);
                editor.setFontSize(18);
                editor.session.setUseSoftTabs(true);
                ace.require("ace/ext/language_tools");
                ace.require("ace/mode/"+language);
                editor.setOptions({
                        enableBasicAutocompletion: true,
                        enableSnippets: false,
                        enableLiveAutocompletion: true
                });
		var textarea = $('textarea[name="code"]').hide();
		editor.getSession().on('change',function(){
			textarea.val(editor.getSession().getValue());
		});
    </script>
{% endblock %}
